<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加减乘除</title>
</head>
<body>
 <div id="app">
    <input type="number" v-model="n1">
    <select v-model="opt">
       <option value="+">+</option>
       <option value="-">-</option>
       <option value="*">*</option>
       <option value="/">/</option>
    </select>
	<input type="number" v-model="n2">
  <button v-on:click="handle">=</button>
  <input type="text" v-model="result">
	<script src="vue.js"></script>
	<script>
       new Vue({
       	  el:'#app',

       	  data:{
            opt:'+',
            n1:'0',
            n2:'0',
            result:0
       	  },
          
          methods:{
            // console.log(this.opt)
            handle(){
              switch(this.opt){
                 case '+':
                   this.result=parseInt(this.n1)+parseInt(this.n2)
                   break;
                 case '-':
                   this.result=parseInt(this.n1)-parseInt(this.n2)
                   break;
                 case '*':
                   this.result=parseInt(this.n1)*parseInt(this.n2)
                   break;
                 case '/':
                   this.result=parseInt(this.n1)/parseInt(this.n2)
                   break;
              }
            }

          }
       })
	</script>
 </div>
</body>
</html>